<template>
  <div>
    <div class="topCards">
      <div style="display: flex;">
        <div class="org_logo">
          <img src="http://gateway.xwpx.zjdykj.com/uploadfile/trainlogo/20210317172242304-20201231153556867-banner1.png" alt="">
        </div>
        <div class="left_info">
          <!-- 标题 -->
          <p>{{detail.name}}</p>
          <!-- 内容结构 -->
          <div class="itemsk" style="margin-top: 10px;">
            <i class="el-icon-s-custom" style="margin-right: 5px; font-size: 20px;"></i>
            <span>信用等级：未评价</span>
          </div>
          <div class="itemsk">
            <i class="el-icon-location" style="margin-right: 5px;font-size: 20px;"></i>
            <span>{{detail.address}}</span>
            <span style="margin-left: 30px;">
              <i class="el-icon-phone" style="font-size: 20px;"></i>
                {{detail.phone}}
            </span>
            <el-button style="margin-left: 10px;" type="text" @click="modifications = true">修改</el-button>
          </div>
          <div class="itemsk">
            <i class="el-icon-postcard" style="font-size: 20px;"></i>
            <span style="margin-left: 5px;">资金监管账号：2333341111333</span>
            <span style="margin-left: 30px;">开户银行：中国工商银行XX路支行</span>
          </div>
          <!-- <el-button type="text" style="margin-right: 30px;">
            <i class="el-icon-map-location" style="font-size: 20px;"></i>
            附近停车场
          </el-button> -->
          <el-button type="text"  @click="modificationsk = true" style="  display: flex; flex-direction: row; justify-content: center;">
            <i class="el-icon-bangzhu" style="font-size: 20px;"></i>
            教学点信息
          </el-button>
          <!-- 上传头像入口 -->
          <!-- <el-upload :show-file-list="false" :on-change="handlePreview">
          <el-button size="small" type="primary">上传头像</el-button>
          </el-upload> -->
        </div>
      </div>
      <div class="right_QuickMark">
        <img src="@/assets/img/erweima.png" alt="">
      </div>
    </div>

    <!-- 标签页 -->
    <div class="labelskc">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="机构资质" name="first" style="padding: 0 32px 32px;">

          <!-- 标题 -->
           <el-descriptions title="办学许许可证" direction="vertical" :column="3" border style="margin-top:30px;">
              <el-descriptions-item label="名称">{{servicesOpenLicense.schoolName}}</el-descriptions-item>
              <el-descriptions-item label="举办者">{{servicesOpenLicense.organizer}}</el-descriptions-item>
              <el-descriptions-item label="校长">{{servicesOpenLicense.principal}}</el-descriptions-item>
              <el-descriptions-item label="地址">{{servicesOpenLicense.schoolAddress}}</el-descriptions-item>
              <el-descriptions-item label="学校类型">{{servicesOpenLicense.schoolTypeName}}</el-descriptions-item>
              <el-descriptions-item label="办学内容">{{servicesOpenLicense.schoolContent}}</el-descriptions-item>
              <el-descriptions-item label="主管部门">{{servicesOpenLicense.authority}}</el-descriptions-item>
              <el-descriptions-item label="发证日期">{{servicesOpenLicense.lssueDateStart}}</el-descriptions-item>
              <el-descriptions-item label="发证机关">{{servicesOpenLicense.issuingAuthority}}</el-descriptions-item>
              <el-descriptions-item label="办学许可证号">{{servicesOpenLicense.license}}</el-descriptions-item>
              <el-descriptions-item label="备注">{{servicesOpenLicense.nature}}</el-descriptions-item>
          </el-descriptions>
           <!-- 标题 -->
           <el-descriptions title="营业执照信息" direction="vertical" :column="3" border style="margin-top:30px;">
              <el-descriptions-item label="持证者主体统一社会信用代码">{{servicesBusinessLicense.licenseNo}}</el-descriptions-item>
              <el-descriptions-item label="企业类型大类">{{servicesBusinessLicense.enterpriseType}}</el-descriptions-item>
              <el-descriptions-item label="企业名称">{{servicesBusinessLicense.enterpriseName}}</el-descriptions-item>
              <el-descriptions-item label="营业执照"></el-descriptions-item>
              <el-descriptions-item label="住所(登记、个体户)">{{servicesBusinessLicense.registrationAddr}}</el-descriptions-item>
              <el-descriptions-item label="法定代表人">{{servicesBusinessLicense.legalPerson}}</el-descriptions-item>
              <el-descriptions-item label="登记状态">{{servicesBusinessLicense.registerStatus ===1?'正常':'注销'}}</el-descriptions-item>
              <el-descriptions-item label="注册资本(资金金额)">{{servicesBusinessLicense.registeredCapital}}万元</el-descriptions-item>
              <el-descriptions-item label="经营范围">{{servicesBusinessLicense.businessScope}}</el-descriptions-item>
              <el-descriptions-item label="登记机关">{{servicesBusinessLicense.registrationAuthority}}</el-descriptions-item>
              <el-descriptions-item label="经营场所">{{servicesBusinessLicense.businessPlace}}</el-descriptions-item>
              <el-descriptions-item label="组织形式">{{servicesBusinessLicense.organizationalForm}}</el-descriptions-item>
              <el-descriptions-item label="其他">{{servicesBusinessLicense.other}}</el-descriptions-item>
          </el-descriptions>
          <!-- 标题 -->
          <p style="font-weight: 700;font-size: 16px;margin-bottom: 20px;margin-top: 20px;">年检信息</p>
          <!-- 第三个表格 第一行 -->
         <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="servicesYearlyInspections" height="96" border style="width: 100%">
            <el-table-column prop="date" label="年检日期" ></el-table-column>
            <el-table-column  prop="status" label="状态" ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="机构介绍" name="second">
          <div style="padding: 0 24px 24px;">
            {{detail.introduction}}
          </div>
        </el-tab-pane>

        <el-tab-pane label="课程信息" name="third">
            <!-- 地理课程 -->
          <div class="kecheng">
            <div class="leftTitle">
              <div class="pass">已通过</div>
              <div class="cover">
                <img src="@/assets/img/geography.png" alt="">
              </div>
            </div>
            <div class="right_info">
              <el-descriptions title="地理">
                  <el-descriptions-item label="培训起止时间">2021年07月01日-2021年07月31日</el-descriptions-item>
                  <el-descriptions-item label="年纪">初一</el-descriptions-item>
                  <el-descriptions-item label="学科">地理</el-descriptions-item>
                  <el-descriptions-item label="拟招生人数">24</el-descriptions-item>
                  <el-descriptions-item label="上课次数">20</el-descriptions-item>
                  <el-descriptions-item label="课总时数">40</el-descriptions-item>
                  <el-descriptions-item label="上课时间">早10点半</el-descriptions-item>
                  <el-descriptions-item label="培训费用">100万</el-descriptions-item>
                  <el-descriptions-item label="上课地点">kira审核通过有课程</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <!-- 数学课程 -->
          <div class="kecheng">
            <div class="leftTitle">
              <div class="pass">已通过</div>
              <div class="cover">
                <img src="@/assets/img/mathematics.png" alt="">
              </div>
            </div>
            <div class="right_info">
              <el-descriptions title="数学">
                  <el-descriptions-item label="培训起止时间">2021年07月01日-2021年07月31日</el-descriptions-item>
                  <el-descriptions-item label="年纪">初一</el-descriptions-item>
                  <el-descriptions-item label="学科">地理</el-descriptions-item>
                  <el-descriptions-item label="拟招生人数">24</el-descriptions-item>
                  <el-descriptions-item label="上课次数">20</el-descriptions-item>
                  <el-descriptions-item label="课总时数">40</el-descriptions-item>
                  <el-descriptions-item label="上课时间">早10点半</el-descriptions-item>
                  <el-descriptions-item label="培训费用">100万</el-descriptions-item>
                  <el-descriptions-item label="上课地点">kira审核通过有课程</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <!-- 英语课程 -->
          <div class="kecheng">
            <div class="leftTitle">
              <div class="pass">已通过</div>
              <div class="cover">
                <img src="@/assets/img/English.png" alt="">
              </div>
            </div>
            <div class="right_info">
              <el-descriptions title="英语">
                  <el-descriptions-item label="培训起止时间">2021年07月01日-2021年07月31日</el-descriptions-item>
                  <el-descriptions-item label="年纪">初一</el-descriptions-item>
                  <el-descriptions-item label="学科">地理</el-descriptions-item>
                  <el-descriptions-item label="拟招生人数">24</el-descriptions-item>
                  <el-descriptions-item label="上课次数">20</el-descriptions-item>
                  <el-descriptions-item label="课总时数">40</el-descriptions-item>
                  <el-descriptions-item label="上课时间">早10点半</el-descriptions-item>
                  <el-descriptions-item label="培训费用">100万</el-descriptions-item>
                  <el-descriptions-item label="上课地点">kira审核通过有课程</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <!-- 生物课程 -->
          <div class="kecheng" v-for="item in 4" :key="item">
            <div class="leftTitle">
              <div class="pass">已通过</div>
              <div class="cover">
                <img src="@/assets/img/biology.png" alt="">
              </div>
            </div>
            <div class="right_info">
              <el-descriptions title="生物">
                  <el-descriptions-item label="培训起止时间">2021年07月01日-2021年07月31日</el-descriptions-item>
                  <el-descriptions-item label="年纪">初一</el-descriptions-item>
                  <el-descriptions-item label="学科">地理</el-descriptions-item>
                  <el-descriptions-item label="拟招生人数">24</el-descriptions-item>
                  <el-descriptions-item label="上课次数">20</el-descriptions-item>
                  <el-descriptions-item label="课总时数">40</el-descriptions-item>
                  <el-descriptions-item label="上课时间">早10点半</el-descriptions-item>
                  <el-descriptions-item label="培训费用">100万</el-descriptions-item>
                  <el-descriptions-item label="上课地点">kira审核通过有课程</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        <!-- 分页 -->
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="margin-top: 20px; margin-bottom: 20px;"
        >
          <el-col :span="5">
            <el-pagination
              background
              layout="total, prev, pager, next, sizes, jumper"
              :total="page.total"
              :page-sizes="[7, 10, 20, 50, 100]"
              :page-size="page.pageSize"
              @current-change="changePage"
              @size-change="handleSizeChange"
              :current-page.sync="page.currentPage"
            ></el-pagination>
          </el-col>
        </el-row>
        </el-tab-pane>
        <!-- 教师信息 -->
        <el-tab-pane label="教师信息" name="teacher">
          <div class="teacherInfo" v-for="item in teacherList" :key="item">
            <div class="itemInfo">
              <img src="@/assets/img/kRentou.png" alt="">
              <div>
                <el-descriptions :title="item.name">
                    <el-descriptions-item label="资格类别">{{item.teacherTypeName}}</el-descriptions-item>
                    <el-descriptions-item label="资格证号">{{item.teacherTypeNum}}</el-descriptions-item>
                    <el-descriptions-item label="任教学科">{{item.subjectName}}</el-descriptions-item>
                    <el-descriptions-item label="任职类型">{{item.workType ==1?'专职':'兼职'}}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        <!-- 分页 -->
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="margin-top: 20px; margin-bottom: 20px;"
        >
          <el-col :span="5">
            <el-pagination
              background
              layout="total, prev, pager, next, sizes, jumper"
              :total="page.total"
              :page-sizes="[7, 10, 20, 50, 100]"
              :page-size="page.pageSize"
              @current-change="changePage"
              @size-change="handleSizeChange"
              :current-page.sync="page.currentPage"
            ></el-pagination>
          </el-col>
        </el-row>
        </el-tab-pane>
        <el-tab-pane label="举办者信息" name="organizer">
          <div style="padding: 0 24px 24px;">{{servicesOpenLicense.principal}}</div>
        </el-tab-pane>
        <el-tab-pane label="视频监控" name="frequency">
        <div class="videoContainer">
          <!-- 播放列表 -->
          <div class="Playlist">
            <el-tabs v-model="activeNamesk" @tab-click="handleClick" type="card" >
              <el-tab-pane label="直播" name="firstskc">
              </el-tab-pane>
              <el-tab-pane label="录播" name="secondskc"></el-tab-pane>
            </el-tabs>
          </div>
          <!-- 播放器 -->
          <div class="Players">
            <video controls="controls" id="movie" src="https://v1.kwaicdn.com/upic/2021/09/10/22/BMjAyMTA5MTAyMjA0NTdfMTg4OTE4MjM1OV81NjkzNjcyNTYxMF8xXzM=_b_Baddcd3d1aa999cf2909e0f2390a582a0.mp4?pkey=AAXjSvw7BQhVLaY_ref-fQaQ0Mv2hg9r4CEeDY-6D6kIC5ptTgoQ1vzRQoahXU21wlPUdlOyBS_XAdAxs5pXd4wUcWRX62p4VNv0s8cV8D7qPi-rw5bu0INsMeGjnHt-y5Y&tag=1-1634410031-xpcwebdetail-0-aweo9smarf-9a94392ff48ab942&clientCacheKey=3xshrguhq6cj9fu_b.mp4&tt=b&di=78f5148a&bp=10004" width="100%" height="100%"></video>
          </div>
        </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 修改按钮弹窗 -->
    <el-dialog title="修改" :visible="modifications" width="40%" :before-close="closdModification">
      <div class="modification">
        <el-form ref="form" :model="ruleForm" label-width="80px" :rules="rules">
          <el-form-item label="名称：" label-width="20%">
            YT
          </el-form-item>
          <el-form-item label="电话：" label-width="20%" prop="pohtent">
            <el-input v-model="ruleForm.pohtent" placeholder="请输入手机号" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifications = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 教学点 -->
    <el-dialog title="教学点" :visible="modificationsk" width="80%"  :before-close="closdModification">
     <!-- <div class="modification " style="width: 100%"> -->
          <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" height="500" border style="width: 100%" :data="teachingPoint">
            <el-table-column label="教学点名称" width="294%" prop="name"></el-table-column>
            <el-table-column label="教学点位置" width="294%" prop="address"></el-table-column>
            <el-table-column label="联系人姓名" width="295%" prop="contactsName"></el-table-column>
            <el-table-column label="联系人手机号" width="295%" prop="contactsTel"></el-table-column>
          </el-table>
      <!-- </div> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="modificationsk = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { servicesDetails, listTeacherReview, servicesCamers, teachingSchool, editServicesPhone, upload } from '@/api'
export default {
  data () {
    return {
      detail: {},
      servicesBusinessLicense: {},
      servicesOpenLicense: {},
      servicesYearlyInspections: [],
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      modifications: false,
      modificationsk: false,
      activeName: 'first',
      activeNamesk: 'firstskc',
      ruleForm: {
        name: 'YT',
        pohtent: ''
      },
      rules: {
        pohtent: [
          { required: true, message: '该选项为必填项', trigger: 'change' }
        ]
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    async handlePreview (file) {
      console.log('filefilefilefilefilefilefile', file)
      const { name } = file
      const data = new FormData()
      data.append('uploadFile', name)
      const ser = await upload(data)
      console.log('上传图片上传图片上传图片上传图片上传图片', ser)
    },
    handleClick ({ name }) {
      console.log(name)
    },
    closdModification () {
      this.modifications = false
      this.modificationsk = false
    },
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async getDetails () {
      var params = {
        servicesId: localStorage.getItem('platform')
      }
      const { code, data } = await servicesDetails(params)
      if (code === 200) {
        console.log('机构详情', data)
        this.detail = data
        this.servicesBusinessLicense = data.servicesBusinessLicense
        this.servicesOpenLicense = data.servicesOpenLicense
        this.servicesYearlyInspections = data.servicesYearlyInspections
        data.servicesYearlyInspections.forEach(element => {
          element.date = this.formatTime(element.date * 1000)
          element.status = element.status === 1 ? '合格' : '不合格'
        })
        this.getTeacherList(data.id)
        this.getCamersList(data.id)
        this.getTeachingPoint(data.id)
      }
    },
    async getTeacherList (servicesId) {
      var params = {
        reviewStatus: 2,
        servicesId: servicesId,
        page: 1,
        limit: 100
      }
      const { code, data } = await listTeacherReview(params)
      if (code === 200) {
        console.log('机构教师列表', data)
        this.teacherList = data.list
        this.page.total = data.pages
      }
    },
    async getCamersList (servicesId) {
      var params = {
        servicesId: servicesId
      }
      const { code, data } = await servicesCamers(params)
      if (code === 200) {
        console.log('机构摄像头列表', data)
        this.camerasList = data.cameras
      }
    },
    async getTeachingPoint (servicesId) {
      var params = {
        reviewStatus: 2,
        servicesId: servicesId,
        page: 1,
        limit: 100
      }
      const { code, data } = await teachingSchool(params)
      if (code === 200) {
        console.log('教学点列表', data)
        this.teachingPoint = data.list
      }
    },
    async editPhone () {
      const href = window.location.href
      const str = href.substr(href.indexOf('=') + 1, href.length)
      var params = {
        servicesId: str,
        phone: this.ruleForm.pohtent
      }
      const { code } = await editServicesPhone(params)
      if (code === 200) {
        this.modifications = false
        this.getDetails()
      }
    },
    formatTime (item) {
      var time = this.$formatTime(item)
      time = time.substr(0, time.indexOf(' '))
      return time
    }
  }
}
</script>

<style lang="less" scped>
  .uploadDemo {
    width: 100%;
    height: 100%;
    background-color: red;
    color: #ffffff;
  }
  .videoContainer {
    height: 100vh;
    display: flex;
    margin-top: -30px;
    overflow: hidden;

    .Players {
      width: 100%;
    }

    .Playlist {
      margin-top: 30px;
      width: 158px;
      border: 1px solid #E4E7ED;
    }

  }

  .teacherInfo {
    height: 140px;
    display: flex;
    margin: 0 24px 24px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .itemInfo {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 100px;
        margin-right: 16px;
      }
    }
  }

  .right_info {
    margin-left: 20px;
  }

  .kecheng {
    height: 170px;
    margin: 0 24px 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .leftTitle {
    position: relative;
    .cover {
      width: 210px;
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .pass {
    position: absolute;
    z-index: 10;
    top: 30px;
    left: -10px;
    border: 3px solid #b7b7b7;
    color: #b7b7b7;
    font-size: 30px;
    padding: 0 24px;
    line-height: 50px;
    width: max-content;
    border-radius: 10px;
    transform: rotate(-30deg);
    }
  }

  .labelskc {
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 10px;
  }

  /deep/ .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }
  .modification {
    border-top: .5px solid #f0f0f0;
    border-bottom: .5px solid #f0f0f0;
    padding: 24px;
  }

  /deep/ .el-card__body {
    background-color: #f0f2f5;
  }

  .topCards {
    background-color: #fff;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    .right_QuickMark {
      width: 270px;
      text-align: center;
      padding-top: 1%;
      border-left: 1px solid rgba(0,0,0,.25);
    }
    .left_info {
      margin-left: 32px;
      .itemsk {
        line-height: 30px;
      }

      p {
        font-size: 32px;
        font-weight: 500;
        color: #000;
      }
    }

    .org_logo {
      width: 256px;
      height: 170px;
      margin-top: 15px;
      border: .5px solid pink;
    }

  }

</style>
